import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { ScrollArea } from '@/components/ui/scroll-area';
import { cn } from '@/lib/utils';
import { useSettingsStore } from '@/store';
import { useId } from 'react';

export default function BaseDocSetting({
  className,
  ...props
}: {
  className: string;
} & React.HTMLAttributes<HTMLDivElement>) {
  const pushSettings = useSettingsStore((state) => state.pushSettings);
  const clearMessageInterval = useSettingsStore((state) => state.baseSettings.clearMessageInterval);
  const isDefaultOpenCollect = useSettingsStore((state) => state.baseSettings.isDefaultOpenCollect);
  const dispatch = useSettingsStore((state) => state.dispatch);
  // console.log(baseSettings);
  const id = useId();

  return (
    <div {...props} className={cn(className, 'flex flex-col')}>
      <div className="grow relative">
        <ScrollArea className="border rounded-sm !absolute h-full w-full p-2 pt-2">
          <div className="flex px-3 gap-2 py-4 bd-bottom-gray items-center">
            <Checkbox
              checked={isDefaultOpenCollect}
              onCheckedChange={(state) => {
                dispatch({
                  type: 'update',
                  update(draftState) {
                    draftState.baseSettings.isDefaultOpenCollect = state ? true : false;
                  },
                });
              }}
              id={id + '-is-default-open-collect'}
              className="rounded-[2px]"
            />
            <Label className="whitespace-nowrap mb-0" htmlFor={id + '-is-default-open-collect'}>
              是否默认打开采集详情的弹框
            </Label>
          </div>
          <div className="flex px-3 gap-2 items-center py-4 bd-bottom-gray">
            <Label className="whitespace-nowrap mb-1" htmlFor={id + '-clear-message-interval'}>
              清理消息的间隔时间(s):
            </Label>
            <Input
              value={clearMessageInterval}
              type="number"
              onChange={(event) => {
                dispatch({
                  type: 'update',
                  update(draftState) {
                    draftState.baseSettings.clearMessageInterval = +event.target.value;
                  },
                });
              }}
              id={id + '-clear-message-interval'}
              className="h-10 w-auto rounded-md border border-input px-3 py-2 mr-auto"
            />
          </div>
        </ScrollArea>
      </div>
    </div>
  );
}
